<template>
  <div class="wrapper">
    <comp-pagetitle><template>新闻资讯</template></comp-pagetitle>
    <div class="news-box">
      <ul>
        <li v-for="item in newslist" :key="item.id">
          <div class="left">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="right">
            <h4>{{item.title}}</h4>
            <p>
              {{item.content}}
            </p>
            <div class="time">
              <i class="el-icon-timer"></i> {{item.time}}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <comp-footer></comp-footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CompPagetitle from "@/components/comp-pagetitle.vue";
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "News",
  components: {
    CompPagetitle,
    CompFooter,
  },
  computed: {
    ...mapState(["newslist"]),
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 1140px;
  margin: 0 auto;
  padding: 30px 0;
}
.news-box {
  width: 100%;
  ul {
    width: 100%;
    box-sizing: border-box;
    li {
      width: 100%;
      height: 280px;
      display: flex;
      padding: 40px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      
      .left {
        width: 270px;
        img {
          cursor: pointer;
          width: 270px;
        }
      }
      .right {
        width: 870px;
        padding: 0 20px;
        box-sizing: border-box;
        h4 {
            width: 400px;
            cursor: pointer;
        }
        p {
            margin-top: 20px;
            width: 800px;
            font-size: 13px;
        }
        .time {
            margin-top: 20px;
            font-size: 12px;
        }
      }
    }
  }
}
</style>